<template>
  <div>
    <div style="height:44px;">
      <sticky :offset="0">
        <tab :line-width="1">
          <tab-item active-class="active-white" @on-item-click="onItemClick">
            <i class="icon iconfont gbp-icon-fix"></i>
          </tab-item>
          <tab-item active-class="active-white" disabled></tab-item>
          <tab-item active-class="active-white" disabled></tab-item>
          <tab-item active-class="active-white" @on-item-click="onItemClick">
            <i class="icon iconfont gbp-icon-fix-telphone"></i>
          </tab-item>
        </tab>
      </sticky>
    </div>
    <br>
    <swiper loop style="width:85%;margin:0 auto;" :aspect-ratio="300/800" :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <!-- <p>current index: {{demo06_index}}</p> -->

    <!-- <divider></divider>

      <group-title>垂直方向文字滚动</group-title>
      <swiper auto height="30px" direction="vertical" :interval=4000 class="text-scroll" :show-dots="false">
        <swiper-item><a href="http://m.baidu.com">义务爱了 完成传奇世界H5-王者归来任务 获得20金币</a></swiper-item>
        <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>
        <swiper-item><p>零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</p></swiper-item>
      </swiper> -->

    <!-- card*15>p[slot="content"]#item$.card-padding{测试$$} -->

    <card v-for="(index) in counts" :key="index">
      <p slot="content" id="item1" class="card-padding">测试{{index}}</p>
    </card>


    <tabs :tabtype="0"></tabs>
  </div>
</template>

<script>
  import {
    Toast,
    XButton,
    Tab,
    TabItem,
    Divider,
    Sticky,
    Blur,
    GroupTitle,
    Swiper,
    XHeader,
    Group,
    Cell,
    SwiperItem,
    Card
  } from "vux";
  import tabs from "../../components/footer";
  import lrz from "lrz";

  const baseList = [{
      url: "javascript:",
      img: "https://static.vux.li/demo/1.jpg",
      title: "送你一朵fua"
    },
    {
      url: "javascript:",
      img: "https://static.vux.li/demo/2.jpg",
      title: "送你一辆车"
    },
    {
      url: "javascript:",
      img: "https://static.vux.li/demo/5.jpg",
      title: "送你一次旅行",
      fallbackImg: "https://static.vux.li/demo/3.jpg"
    }
  ];

  const urlList = baseList.map((item, index) => ({
    url: "http://m.baidu.com",
    img: item.img,
    fallbackImg: item.fallbackImg,
    title: `(可点击)${item.title}`
  }));

  export default {
    components: {
      Toast,
      XButton,
      Tab,
      TabItem,
      Blur,
      Sticky,
      GroupTitle,
      Divider,
      Swiper,
      XHeader,
      Group,
      Cell,
      SwiperItem,
      tabs,
      Card
    },
    data() {
      return {
        counts: 15,
        demo06_list: urlList,
        demo06_index: 0,
        swiperItemIndex: 1,
        url: "https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg",
        tipsContent: "",
        showTips: false
      };
    },
    methods: {
      demo06_onIndexChange(index) {
        this.demo06_index = index;
      },
      onItemClick(index) {
        console.log(index);
        if (index == 0) {
          this.$router.push({
            name: 'workorder'
          })
        }
      },
    }
  };

</script>

<style lang="scss">
  @import "../../style/common";

  body {
    background-color: #fff;
  }

  .card-padding {
    padding: 15px;
  }

  .overwrite-title-demo {
    margin-top: 5px;
  }

  .active-white {
    color: white !important;
    border-color: white !important;
  }

</style>
